<template>
	<view>
		<cu-custom bgColor="bg-red" :isBack="true">		<block slot="backText"></block>
			<block slot="content">{{title}}</block>
		</cu-custom>
		
		<view class="whole-box">
			<view class="table-box">
				<view class="goods">
					<image :src="detail && detail.product_picture ? detail.product_picture : ''"></image>
					<view class="info">
						<text class="name">{{detail && detail.product_name ? detail.product_name : ''}}</text>
						<text class="spec">数量：{{detail && detail.num ? detail.num : '1'}}箱</text>
					</view>
				</view>
				<view class="star-line">
					<text class="bold">总体</text>
					<view class="star">
						<block v-for="(item,i) in popula" :key="i">
							<image :src="item.img" @tap="clickFine(item.img, i, 'popula', popula)"></image>
						</block>
					</view>
					<text class="bold">{{popula_name}}</text>
				</view>
				<view class="star-line">
					<text>质量</text>
					<view class="star">
						<block v-for="(item,i) in quality" :key="i">
							<image :src="item.img" @tap="clickFine(item.img, i, 'quality', quality)"></image>
						</block>
					</view>
					<text>{{quality_name}}</text>
				</view>
				<view class="star-line">
					<text>态度</text>
					<view class="star">
						<block v-for="(item,i) in attitude" :key="i">
							<image :src="item.img" @tap="clickFine(item.img, i, 'attitude', attitude)"></image>
						</block>
					</view>
					<text>{{attitude_name}}</text>
				</view>
				<view class="text-content">
					<textarea maxlength="50" placeholder="填写评价，可以帮助更多想买的人" placeholder-class="text-placeholder" v-model="formData.content"></textarea>
				</view>
				
				
				<view class="covers">
					<ImageUploadView ref="ImageUploadView1" :stitle="'添加图片'"></ImageUploadView>
				</view>
				<view style="padding: 10px;" v-if="detail && detail.eavdata && detail.eavdata.explain_first != ''">
					商家回复:{{detail.eavdata.explain_first}}
				</view>
				
				<view class="text-content" v-if="detail && detail.eavdata && detail.eavdata.again_content != ''">
					<view style="padding: 10px;">追评内容:{{detail.eavdata.again_content}}</view>
					<view v-if="detail && detail.eavdata && detail.eavdata.again_explain != ''" style="padding: 10px;">商家回复:{{detail.eavdata.again_explain}}</view>
				</view>
				
			</view>
			<view v-if="detail && detail.is_evaluate == 0" class="submit-btn" :class="'bg-'+theme" @tap="get_sub()">发布</view>
			<view v-else class="submit-btn" :class="'bg-'+theme" style="background-color: #666666">已评价</view>
			
		</view>
	</view>
</template>

<script>
	import ImageUploadView from '@/components/default/ImageUploadView.vue'
	export default {
		components: {
			ImageUploadView
		},
		data() {
			return {
				theme: this.$config.THEME(),
				title: '发表评价', //默认都是5星
				formData: {
					scores:5,
					quality:5,
					attitude:5,
					content:'',
					covers:'',
					order_product_id:0,
					order_id:0
				},
				loading:false,
				orderid:0,
				orderproid:0,
				goodsid:0,
				detail:null,
				popula_name:'非常好',
				quality_name:'非常好',
				attitude_name:'非常好',
				imgt:'../../../static/star-on.png',
				imgf:'../../../static/star.png',
				popula: [{
					img: '../../../static/star-on.png',
					num: 1,
					title:'非常差'
				}, {
					img: '../../../static/star-on.png',
					num: 2,
					title:'差'
				}, {
					img: '../../../static/star-on.png',
					num: 3,
					title:'一般'
				}, {
					img: '../../../static/star-on.png',
					num: 4,
					title:'好'
				}, {
					img: '../../../static/star-on.png',
					num: 5,
					title:'非常好'
				}],
				quality: [{
					img: '../../../static/star-on.png',
					num: 1,
					title:'非常差'
				}, {
					img: '../../../static/star-on.png',
					num: 2,
					title:'差'
				}, {
					img: '../../../static/star-on.png',
					num: 3,
					title:'一般'
				}, {
					img: '../../../static/star-on.png',
					num: 4,
					title:'好'
				}, {
					img: '../../../static/star-on.png',
					num: 5,
					title:'非常好'
				}],
				attitude: [{
					img: '../../../static/star-on.png',
					num: 1,
					title:'非常差'
				}, {
					img: '../../../static/star-on.png',
					num: 2,
					title:'差'
				}, {
					img: '../../../static/star-on.png',
					num: 3,
					title:'一般'
				}, {
					img: '../../../static/star-on.png',
					num: 4,
					title:'好'
				}, {
					img: '../../../static/star-on.png',
					num: 5,
					title:'非常好'
				}],
			};
		},
		onLoad(options) {
			if (options.orderid > 0) {
				this.orderid = options.orderid
			}
			
			if (options.orderproid > 0) {
				this.orderproid = options.orderproid
				
			}
			
			this.getDetail();
		},
		onShow() {
			
		},
		methods: {
			getDetail(){
				
					this.$http
						.post('evaluate_info', {
							orderid: this.orderid,
							orderproid: this.orderproid,
						})
						.then((response) => {
							console.log(response.data.data)
							this.detail = response.data.data
							if (this.detail.eavdata != '') {
								let eavdata = this.detail.eavdata
								this.formData.content = eavdata.content
								// console.log(evadata.covers)
								console.log(response.data.data.eavdata.covers)
								this.$refs.ImageUploadView1.setData(response.data.data.eavdata.covers)
								if (eavdata.scores > 0) {
									for(var i = 0 ; i <= eavdata.scores - 1; i++) {
										this.popula[i].img = '../../../static/star-on.png'
									}
									this.popula_name = this.popula[eavdata.scores-1].title
									if (eavdata.scores != 5) {
										for(var i = eavdata.scores ; i <= 4; i++) {
											this.popula[i].img = '../../../static/star.png'
										}
									}
								}
								
								if (eavdata.quality > 0) {
									for(var i = 0 ; i <= eavdata.quality - 1; i++) {
										this.quality[i].img = '../../../static/star-on.png'
									}
									this.quality_name = this.quality[eavdata.quality-1].title
									if (eavdata.quality != 5) {
										for(var i = eavdata.quality ; i <= 4; i++) {
											this.quality[i].img = '../../../static/star.png'
										}
									}
								}
								
								if (eavdata.attitude > 0) {
									for(var i = 0 ; i <= eavdata.attitude - 1; i++) {
										this.attitude[i].img = '../../../static/star-on.png'
									}
									this.attitude_name = this.attitude[eavdata.attitude-1].title
									if (eavdata.attitude != 5) {
										for(var i = eavdata.scores ; i <= 4; i++) {
											this.attitude[i].img = '../../../static/star.png'
										}
									}
								}
							}
							
							uni.hideLoading()
						})
						.catch((response) => {
							console.log(response)
							uni.hideLoading()
							this.loading = false;
						})
					
				
			},
			get_sub(){
				let formData = this.formData;
				this.$refs.ImageUploadView1.getUploadList().then((res) => {
					if (!res || res.length == 0) {
						// this.$common.showError('请上传评价图片')
						// this.loading = false
						// return
					}
					formData.covers = res
					uni.showLoading({
						title: '正在提交中...'
					})
					formData.order_id = this.orderid
					formData.order_product_id = this.orderproid
					formData.merchant_id = this.detail.merchant_id
					this.loading = true;
						this.$http
							.post('evaluate_create', 
								{evaluate:JSON.stringify([formData])},
							)
							.then((response) => {
								this.$common.showSuccess('评论成功', function() {
									uni.navigateTo({
										url: '/pages/shop/order/detail?id=' + formData.order_id
									})
								})
								uni.hideLoading()
							})
							.catch((response) => {
								// console.log(response)
							})
					})
					
			},
			clickFine(imgurl, index, type, data){
				let list = data;
				// console.log(index)
				// console.log(imgurl)
				let newindex = index;
				if (index == 0) {
					for(var i = 0; i <= 4; i++) {
						if (imgurl == this.imgf) {	//点第一个变亮
							list[0].img = this.imgt
						} else {
							list[i].img = this.imgf  //不然所有都变暗
							newindex = 0;
						}	
					}
				} else {
					if (imgurl == this.imgf) {	//点变亮
						for(var i = 0; i <= index; i++) {
							list[i].img = this.imgt
						} 
						for(var j = 1; j > i; i++) {
							list[j].img = this.imgf
						} 
					} else {
						for(var i = index; i <= 4; i++) {
							list[i].img = this.imgf
							newindex = index - 1;
						} 
						
					} 
				}
				if (type == 'popula') {
					this.popula_name = list[newindex].title;
					this.formData.scores =  list[newindex].num;
				}
				if (type == 'quality') {
					this.quality_name = list[newindex].title;
					this.formData.quality =  list[newindex].num;
				}
				if (type == 'attitude') {
					this.attitude_name = list[newindex].title;
					this.formData.attitude =  list[newindex].num;
				}
			},
		}
	}
</script>

<style>
	.table-box{
		margin: 20rpx 20rpx 0;
		background-color: #FFFFFF;
		padding: 32rpx 18rpx;
		border-radius: 16rpx;
	}
	.table-box .goods{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.table-box .goods image{
		width: 102rpx;
		height: 102rpx;
		margin-right: 18rpx;
		border-radius: 6rpx;
		flex-shrink: 0;
	}
	.table-box .goods .info{
		flex: 1;
		height: 102rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}
	.table-box .goods .info .name{
		font-size: 28rpx;
		font-weight: bold;
		color: #333333;
	}
	.table-box .goods .info .spec{
		font-size: 26rpx;
		color: #999999;
	}
	
	.table-box .star-line{
		margin-top: 40rpx;
		display: flex;
		align-items: center ;
	}
	.star-line text{
		font-size: 26rpx;
		color: #999999;
	}
	.star-line text.bold{
		font-size: 30rpx;
		color: #333333;
	}
	.star-line .star{
		width: 300rpx;
		margin: 0 40rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.star-line .star image{
		width: 42rpx;
		height: 40rpx;
	}
	
	.text-content{
		width: 100%;
		height: 130rpx;
		margin-top: 40rpx;
		line-height: 36rpx;
	}
	.text-content textarea{
		width: 100%;
		height: 100%;
	}
	.text-placeholder{
		font-size: 26rpx;
		color: #B9B8B8;
	}
	
	.submit-btn{
		margin: 40rpx auto 10rpx;
		width: 70%;
		text-align: center;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 40rpx;
		font-size: 30rpx;
	}
</style>
